import axios from 'axios'
import qs from 'qs'
import { Toast } from 'vant'
// import router from '../router' 这一行 是为了 下面 跳转路由的时候，可以使用 router.push 直接跳转
import Vue from 'vue' // 现在则是直接使用 Vue 实例，通过 bus.$router.push 来跳转
const bus = new Vue() // 这个 bus 就是 Vue ，其上面就有我们刚刚定制的 $showLoading/hideLoading 方法


// 创建一个实例
const request = axios.create({
  baseURL: '/filter',
  timeout: 5000
})

// 请求拦截
request.interceptors.request.use(function (config) {
  // Do something before request is sent  请求被发送之前的一些东西
  // 在请求 发放之前，让 loading 显示，间接做到了，数据请求的时候，显示loading，而后再数据请求到了，再让 loading 消失即可
  bus.$showLoading()

  if (config.method === 'post' && config.data) {
    config.data = qs.stringify(config.data)
  }
  // 请求头中 传入 access_token,    在每次登录成功后，也就是读取 本地存储里面的 access_token 将其 赋值给 请求里面
  // config.headers 是请求头有 ，往里面增加一个 属性 access_token， 值为 本地存储里面的  access_token
  const accessToken = localStorage.getItem('access_token')
  if (accessToken) {
    config.headers.access_token = accessToken
  }


  return config
}, function (error) {
  // Do something with request error  请求错误怎么办
  return Promise.reject(error)
})

// 响应拦截
/* 
  一般我们会在这里 处理 登录过期操作
  如果 token 过期，那么前端请求后端，需要的 token 接口就会被修改，也就是
  在 token 过期的时候，后端会返回一个 错误的 code 如：
  data:{
    code:401, // 这个不是 http 状态码，是自定义的状态码，一般错误的时候，返回 401，但是也不绝对
    msg:'token过期了，请重新登录'
  }

*/
request.interceptors.response.use(function (response) {
  // Any status code that lie within the range of 2xx cause this function to trigger  在2xx范围内的任何状态代码都会触发此函数
  // Do something with response data   对响应数据做些什么
  // 判断 登录是否过期，也就是 比较 你的 code 是否为 401

  // 在数据响应的时候，让 loading 消失
  bus.$hideLoading()

  if (response.data.code === 401) {
    // token 过期了
    Toast('token 过期了,请重新登陆！！！')
    // 跳转路由
    bus.$router.push('/login')
  }
  return response
}, function (error) {
  // Any status codes that falls outside the range of 2xx cause this function to trigger  任何超出2xx范围的状态码都会触发此函数
  // Do something with response error  对响应错误做些什么
  return Promise.reject(error)
})

export default request
